/*从左旋转进入*/
.rotate-left {
	display: inline-block;
	animation:rotateLeft 2s linear;
}
@keyframes rotateLeft{
	0%{
		transform: rotate(180deg);
		transform-origin: top center;
		-moz-transform-origin: top center;
		-webkit-transform-origin: top center;
		-o-transform-origin: top center;
	}
	50%{
		transform: rotate(90deg);
		transform-origin: top center;
		-moz-transform-origin: top center;
		-webkit-transform-origin: top center;
		-o-transform-origin: top center;
	}
	100%{
		transform: rotate(0deg);
		transform-origin: top center;
		-moz-transform-origin: top center;
		-webkit-transform-origin: top center;
		-o-transform-origin: top center;		
	}
}
/*从右旋转进入*/
.rotate-right {
	display: inline-block;
	animation: rotateRight 2s linear ;
}
@keyframes rotateRight{
	0%{
		transform:rotate(-180deg);
		transform-origin: top center;
		-moz-transform-origin: top center;
		-webkit-transform-origin:top center;
		-o-transform-origin:top center;
	}
	100%{
		transform:rotate(0deg);
		transform-origin: top center;
		-moz-transform-origin: top center;
		-webkit-transform-origin: top center;
		-o-transform-origin: top center;		
	}
}

/*从左旋转退出*/
.rotate-out-left {
	display: inline-block;
	animation: rotateOutLeft 2s linear ;
}
@keyframes rotateOutLeft{
	0%{
		transform:rotate(0deg);
		transform-origin: top center;
		-moz-transform-origin: top center;
		-webkit-transform-origin:top center;
		-o-transform-origin:top center;
	}
	50%{
		transform:rotate(90deg);
		transform-origin: top center;
		-moz-transform-origin: top center;
		-webkit-transform-origin: top center;
		-o-transform-origin: top center;
	}
	100%{
		transform:rotate(180deg);
		transform-origin: top center;
		-moz-transform-origin: top center;
		-webkit-transform-origin: top center;
		-o-transform-origin: top center;		
	}
}
/*从右旋转退出*/
.rotate-out-right {
	display: inline-block;
	animation: rotateOutRight 2s linear ;
}
@keyframes rotateOutRight{
	0%{
		transform:rotate(0deg);
		transform-origin: top center;
		-moz-transform-origin: top center;
		-webkit-transform-origin:top center;
		-o-transform-origin:top center;
	}
	100%{
		transform:rotate(-180deg);
		transform-origin: top center;
		-moz-transform-origin: top center;
		-webkit-transform-origin: top center;
		-o-transform-origin: top center;		
	}
}

/*放大进入*/
.zoom-in{
	display: inline-block;
	animation: zoomIn 2s linear;
}
@keyframes zoomIn {
	0% {
		transform: scale(0.1); 
		opacity: 0;
		transform-origin: center center;
		-moz-transform-origin: center center;
		-webkit-transform-origin: center center;
		-o-transform-origin: center center;
	}
	100% {
		transform: scale(1);
		opacity: 1;
		transform-origin: center center;
		-moz-transform-origin: center center;
		-webkit-transform-origin: center center;
		-o-transform-origin: center center;				
	}
}
/*缩小退出*/
.zoom-out{
	display: inline-block;
	animation: zoomOut 2s linear;
}
@keyframes zoomOut {
	0% {
		transform: scale(1); 
		opacity: 1;
		transform-origin: center center;
		-moz-transform-origin: center center;
		-webkit-transform-origin: center center;
		-o-transform-origin: center center;
	}
	100% {
		transform: scale(0.1);
		opacity: 0;
		transform-origin: center center;
		-moz-transform-origin: center center;
		-webkit-transform-origin: center center;
		-o-transform-origin: center center;				
	}
}

/*左上角放大*/
.zoom-in-left-top{
	display: inline-block;
	animation: zoomInLeftTop 2s linear;
}
@keyframes zoomInLeftTop {
	0% {
		transform: scale(0.1); 
		opacity: 0;
		transform-origin: top left;
		-moz-transform-origin: top left;
		-webkit-transform-origin: top left;
		-o-transform-origin: top left;
	}
	100% {
		transform: scale(1); 
		opacity: 1;
		transform-origin: top left;
		-moz-transform-origin: top left;
		-webkit-transform-origin: top left;
		-o-transform-origin: top left;				
	}
}

/*右上角放大*/
.zoom-in-right-top{
	display: inline-block;
	animation: zoomInRightTop 2s linear;
}
@keyframes zoomInRightTop {
	0% {
		transform: scale(0.1); 
		opacity: 0;
		transform-origin: top right;
		-moz-transform-origin: top right;
		-webkit-transform-origin: top right;
		-o-transform-origin: top right;
	}
	100% {
		transform: scale(1); 
		opacity: 1;
		transform-origin: top right;
		-moz-transform-origin: top right;
		-webkit-transform-origin: top right;
		-o-transform-origin: top right;				
	}
}

/*右下角放大*/
.zoom-in-right-bottom{
	display: inline-block;
	animation: zoomInRightBottom 2s linear;
}
@keyframes zoomInRightBottom {
	0% {
		transform: scale(0.1); 
		opacity: 0;
		transform-origin: bottom right;
		-moz-transform-origin: bottom right;
		-webkit-transform-origin: bottom right;
		-o-transform-origin: bottom right;
	}
	100% {
		transform: scale(1); 
		opacity: 1;
		transform-origin: bottom right;
		-moz-transform-origin: bottom right;
		-webkit-transform-origin: bottom right;
		-o-transform-origin: bottom right;				
	}
}

/*左下角放大*/
.zoom-in-left-bottom{
	display: inline-block;
	animation: zoomInLeftBottom 2s linear;
}
@keyframes zoomInLeftBottom {
	0% {
		transform: scale(0.1); 
		opacity: 0;
		transform-origin: bottom left;
		-moz-transform-origin: bottom left;
		-webkit-transform-origin: bottom left;
		-o-transform-origin: bottom left;
	}
	100% {
		transform: scale(1); 
		opacity: 1;
		transform-origin: bottom left;
		-moz-transform-origin: bottom left;
		-webkit-transform-origin: bottom left;
		-o-transform-origin: bottom left;				
	}
}
/******************************************/


/*左上角放大*/
.zoom-out-left-top{
	display: inline-block;
	animation: zoomOutLeftTop 2s linear;
}
@keyframes zoomOutLeftTop {
	0% {
		transform: scale(1); 
		opacity: 1;
		transform-origin: top left;
		-moz-transform-origin: top left;
		-webkit-transform-origin: top left;
		-o-transform-origin: top left;
	}
	100% {
		transform: scale(0.1); 
		opacity: 0;
		transform-origin: top left;
		-moz-transform-origin: top left;
		-webkit-transform-origin: top left;
		-o-transform-origin: top left;				
	}
}

/*右上角放大*/
.zoom-out-right-top{
	display: inline-block;
	animation: zoomOutRightTop 2s linear;
}
@keyframes zoomOutRightTop {
	0% {
		transform: scale(1); 
		opacity: 1;
		transform-origin: top right;
		-moz-transform-origin: top right;
		-webkit-transform-origin: top right;
		-o-transform-origin: top right;
	}
	100% {
		transform: scale(0.1); 
		opacity: 0;
		transform-origin: top right;
		-moz-transform-origin: top right;
		-webkit-transform-origin: top right;
		-o-transform-origin: top right;				
	}
}

/*右下角放大*/
.zoom-out-right-bottom{
	display: inline-block;
	animation: zoomOutRightBottom 2s linear;
}
@keyframes zoomOutRightBottom {
	0% {
		transform: scale(1); 
		opacity: 1;
		transform-origin: bottom right;
		-moz-transform-origin: bottom right;
		-webkit-transform-origin: bottom right;
		-o-transform-origin: bottom right;
	}
	100% {
		transform: scale(0.1); 
		opacity: 0;
		transform-origin: bottom right;
		-moz-transform-origin: bottom right;
		-webkit-transform-origin: bottom right;
		-o-transform-origin: bottom right;				
	}
}

/*左下角放大*/
.zoom-out-left-bottom{
	display: inline-block;
	animation: zoomOutLeftBottom 2s linear;
}
@keyframes zoomOutLeftBottom {
	0% {
		transform: scale(1); 
		opacity: 1;
		transform-origin: bottom left;
		-moz-transform-origin: bottom left;
		-webkit-transform-origin: bottom left;
		-o-transform-origin: bottom left;
	}
	100% {
		transform: scale(0.1); 
		opacity: 0;
		transform-origin: bottom left;
		-moz-transform-origin: bottom left;
		-webkit-transform-origin: bottom left;
		-o-transform-origin: bottom left;				
	}
}
	    